<template>
<div class="container appoint-history">

  <div class="visual-header">
    <mu-tabs :value="activeTab" @change="handleTabChange">
      <mu-tab value="tab1" title="待就诊"/>
      <mu-tab value="tab2" title="全部预约"/>
    </mu-tabs>
  </div>
  <div class="infinite-container visual-content">
      <div v-if="appoints.length > 0">
        <div v-for="item in appoints" :key="item.id">
          <div class="appoint-card" :class="[item.payStatus > 2 ? 'theme-gray' : '']">
            <div class="appoint-card-header">
              <span class="title t3">就诊人：<span class="t1">{{item.patientName}}</span></span>
              <span class="t1">（{{item.patientMedicalCardNumber}}）</span>
              <div class="fr t5">
                <span v-if="item.orderStatus === 1" class="t5">{{PAY_STATUS[item.orderStatus]}}</span>
                <span v-else-if="item.orderStatus === 2" class="t3">{{PAY_STATUS[item.orderStatus]}}</span>
                <span v-else class="t1">{{PAY_STATUS[item.orderStatus]}}</span>
              </div>
            </div>
            <mu-divider></mu-divider>
            <div class="appoint-card-content" @click="cancelOrder(item)">
              <p><i class="iconfont icon-keshi"></i> <span class="t3">科室</span> {{item.departmentName}}</p>
              <p><i class="iconfont icon-icon9001"></i> <span class="t3">医生</span> {{item.doctorName}}</p>
              <p><i class="iconfont icon-shijian"></i> <span class="t3">时间</span> {{item.scheduleDate}} {{item.beginTime|getHourMinites}} - {{item.endTime | getHourMinites}}</p>
              <p><i class="iconfont icon-zhuyuanyujiao"></i> <span class="t3">诊疗费</span>
                <span class="">{{item.regFee | fixedMoney}}</span></p>
            </div>
            <mu-divider></mu-divider>
            <div class="appoint-card-footer">
              <span v-show="item.payStatus === 1" class="t5">未支付</span>
              <span v-show="item.payStatus === 2" class="t3">已支付</span>
              <template v-if="item.orderStatus===2 || item.orderStatus===3">
                <div class="fr">
                  <mu-raised-button primary label="重新预约" @click="reAppoint(item)"/>
                </div>
              </template>
              <template v-else>
                <div class="fr">
                  <mu-raised-button primary class="no-shadow small" label="取消预约" @click="cancelOrder(item)"/>
                  <!-- <mu-raised-button label="在线支付" @click="goPay(item)" primary v-show="item.payStatus === 1"/> -->
                </div>
              </template>

            </div>
          </div>
        </div>
      </div>
      <div class="not-found" v-else>
        <div>暂无预约记录</div>
      </div>

  </div>

    <confirm-id :familyPerson="familyPerson" :person="person" :show="showConfirm"  @close="showConfirm=false"></confirm-id>

</div>
</template>

<script>
import {commonAjax, PAY_URL} from '@/api/api'
import {PAY_STATUS} from '@/api/const'
import confirmId from '@/components/confirmId'
export default {
  components: {confirmId},
  data () {
    return {
      appoints: [],
      defaultAppoints: [],
      waitAppoints: [],
      PAY_STATUS: PAY_STATUS,
      familyPerson: JSON.parse(sessionStorage.familyPerson || '{}'),
      person: JSON.parse(sessionStorage.person || '{}'),
      activeTab: 'tab1',
      showConfirm: false
    }
  },
  methods: {
    handleTabChange (val) {
      this.activeTab = val
      if (val === 'tab1') {
        this.getHistoryList()
      } else {
        this.getAll()
      }
    },
    cancelOrder (order) {
      sessionStorage.currentOrder = JSON.stringify(order)
      this.$router.push('/appointment/cancel-order')
    },
    reAppoint (order) {
      let dept = {
        departmentCode: order.departmentCode,
        departmentName: order.departmentName
      }
      sessionStorage.dept = JSON.stringify(dept)
      this.$router.push('/appointment/select-doctor')
    },
    rePay (order) {
      sessionStorage.order = JSON.stringify(order)
      // for ios pay
      if (sessionStorage.encCode) {
        this.$router.replace('/appointment/appoint-pay-thirdparty')
      } else {
        window.location.href = PAY_URL
      }
    },
    getHistoryList () {
      this.appoints = []
      let param = {
        patientMedicalCardType: 1,
        patientIdentityCardType: 1,
        patientIdentityCardNumber: this.familyPerson.idcard,
        visitStatus: 1,
        outpatientTpye: 1,
        [this.$APP_PLATFORM_NAME]: sessionStorage[this.$APP_PLATFORM_NAME]
      }
      commonAjax('appointment/listAppointmentWait', param, true).then(res => {
          if (res.data.code == 200) {
          this.appoints = res.data.data
        } else if (res.data.code === -100) {
          // this.showConfirm = true
        }
      }).catch(res => {
          this.$store.commit('UPDATE_TOAST', {message: '服务忙'})
      })
    },
    getAll () {
      this.appoints = []
      let param = {
        patientMedicalCardType: 1,
        patientIdentityCardType: this.familyPerson.cardtype,
        patientIdentityCardNumber: this.familyPerson.idcard,
        outpatientTpye: 1,
        visitStatus: 2,
        [this.$APP_PLATFORM_NAME]: sessionStorage[this.$APP_PLATFORM_NAME]
      }
      commonAjax('appointment/listAppointmentWait', param, true).then(res => {
          if (res.data.code == 200) {
          this.appoints = res.data.data
        } else if (res.data.code === -100) {
          // this.showConfirm = true
        }
      }).catch(res => {
          this.$store.commit('UPDATE_TOAST', {message: '服务忙'})
      })
    },
    goPay (param) {
      sessionStorage.setItem('order', JSON.stringify(param))
      this.$router.push({
        path: '/appointment/payOnline'
      })
    }
  },
  mounted () {
    // if (this.person.certificationValidityPeriod === '1') {
    this.getHistoryList()
    return
    // }
    // this.showConfirm = true
  }
}
</script>

<style lang="less">
@import '../../common/css/vars.less';
  .appoint-history {
    .appoint-card {
      background: #fff;
      margin-bottom: 10px;
      padding: 1em;
      border: 1px solid @color-border;
      overflow: auto;
      .appoint-card-header {
        padding-bottom: 1em;
        .title {
          font-size: 1.2em;
        }
      }
      .appoint-card-content {
        a {
          color: #333;
        }
        p {
          margin: .7em 0;
        }
        .iconfont {
          color: @color-primary;
          font-size: 1em
        }
      }
      .appoint-card-footer {
        overflow: auto;
        padding-top: 1em;
        span{
          line-height: 3;
        }
      }

    }
    .appoint-card.theme-gray {
      color: @color-gray;
      a, .iconfont, .title{color: @color-gray;}
    }
  }
.feeText{
  color:@color-feeText
}
.feeTextBig{
  color:@color-feeText;
  font-size:20px;
}
</style>
